CSS Dropdown help - no IE7 support?

[ttam]

site in question: SunriseHairDesign.com

Using unordered lists (UL LI) with CSS for navigation drop-downs and a menu of services. It works perfectly in IE8, Chrome, FF, Safari, etc., etc. I knew it wouldn't work in IE6 (Using alpha-tran PNGs, etc), but I thought it would work in IE7 at the least. In IE7, the drop-down menus show up under text and you can't move your mouse to many other options. On the Services page, the mouseover changes the colors of the cells. It works great in IE8 and standards-based browsers, but in IE7, it's all sorts of messed up.

I'd really appreciate some insight into what I'm doing wrong. Here is some code:

Navigation CSS (Partial):

/* *****************NAVIGATION******************** */
#navi { position: relative; float: left; clear: right; width: 896px; left: 50%; margin-left: -448px; padding: 2em 0 2em 0; list-style: none; }
#nav, #nav ul { padding: 0; margin: 0; list-style: none; line-height: 1; z-index: 9999; }
#nav a { display: block; width: 12.8em; color: transparent; }
#nav li { float: left; width: 12.8em; }
#nav li ul { position: absolute; width: 12.8em; left: -999em; }
#nav li:hover ul, #nav li.sfhover ul { left: auto; }
#nav li ul ul { margin: -2.5em 0 0 12.8em; }
#nav li:hover ul ul, #nav li.sfhover ul ul { left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { left: auto; }
#nav_sl { background: url(images/nav/sl.png); width: 12.8em; height: 3em; }
#nav_sl:hover { background: url(images/nav/sl_o.png); }
#nav_se { background: url(images/nav/se.png); width: 12.8em; height: 3em; }
#nav_se:hover { background: url(images/nav/se_o.png); }
#nav_gc { background: url(images/nav/gc.png); width: 12.8em; height: 3em; }
#nav_gc:hover { background: url(images/nav/gc_o.png); }

The menu:

<div id="navi">
        	<ul id="nav">
            	<li><a href="/index2.php"><div id="nav_sl"></div></a>
                	<ul>
                    	<li><a href="/pages/localsupport"><div id="nav_gb"></div></a>
                        	<ul>
                            	<li><a href="/pages/locksoflove"><div id="nav_ll"></div></a></li>
                            </ul>
                        </li>
                        <li><a href="/pages/policies"><div id="nav_po"></div></a></li>
                        <li><a href="/pages/map/"><div id="nav_md"></div></a></li>
                    </ul>
                </li>                              
            	<li><a href="/pages/services"><div id="nav_se"></div></a>
                	<ul>
                    	<li><a href="/pages/services/index.php#color"><div id="nav_cs"></div></a>
                        <li><a href="/pages/services/index.php#haircuts"><div id="nav_hc"></div></a>
                        <li><a href="/pages/services/index.php#special"><div id="nav_ss"></div></a>
                        <li><a href="/pages/services/index.php#perms"><div id="nav_pm"></div></a>
                        <li><a href="/pages/services/index.php#waxing"><div id="nav_wx"></div></a>
                        <li><a href="/pages/extensions"><div id="nav_et"></div></a>
                    </ul>
                </li>
				<li><a href="/pages/color"><div id="nav_co"></div></a></li>
                <li><a href="/pages/experts"><div id="nav_ex"></div></a></li>
                <li><a href="/pages/products"><div id="nav_pr"></div></a></li>
                <li><a href="/pages/giftcert"><div id="nav_gc"></div></a></li>
                <li><a href="/pages/contact"><div id="nav_cn"></div></a></li>
            </ul>
            </div>

The Table CSS:

#srvtable { width: 35em; float: left; color: #FFF; display:table; }
#prdtable { width: 50em; float: left; color: #FFF; display:table; }
#srvtable ul, #prdtable ul { display:table-row; width: 100%; }
#srvtable ul li { display: table-cell; padding: .5em; width: 8%; text-align: center; }
#prdtable ul li { display: table-cell; padding: .5em; }
#srvtable ul li.title { font-weight: bold; font-size: 2em; background: url(images/tblhead.jpg) repeat-x top left; color: #FFF; text-align: center; height: 1em; width: auto; }
#srvtable ul.odd, #prdtable ul.odd { font-size: 1.6em; background: #211005; }
#srvtable ul.even, #prdtable ul.even { font-size: 1.6em; background: #401c05; }
#srvtable ul.odd:hover li, #srvtable ul.even:hover li, #prdtable ul.odd:hover li, #prdtable ul.even:hover li { background: #b66527; }
ul.even li a, ul.odd li a, ul.even li a:visited, ul.odd li a:visited { color: #FFF; text-decoration: none; }

The Table (partial):

<div id="srvtable">
<br />
<ul>
    <li class="title"><a name="color">Color Services</a></li>
    <li class="title">From</li>
</ul>
<ul class="odd">
    <li>Full Foils</li>
    <li>$84</li>
</ul>
<ul class="even">
    <li>Partial Foils</li>
    <li>$74</li>
</ul>
<ul class="odd">
    <li>Color Retouch</li>
    <li>$64</li>
</ul>
<ul class="even">
    <li>Initial Color</li>
    <li>$64</li>
</ul>
<ul class="odd">
    <li>Additional Color (per color)</li>
    <li>$20</li>
</ul>
<ul class="even">
    <li>Overlays & Add-on Color</li>
    <li>$20</li>
</ul>
<ul class="odd">
    <li><10 Foils (per foil)</li>
    <li>$7</li>
</ul>
<ul class="even">
    <li>Cap Highlights</li>
    <li>$43</li>
</ul>
<ul class="odd">
    <li>Corrective Color (by consultation only)</li>
    <li>per hr.</li>
</ul>
<ul class="even">
    <li>Men's Color</li>
    <li>$43</li>
</ul>
<ul>
    <li class="title"><a name="haircuts">Hair Cuts</a></li>
	<li class="title">From</li>
</ul>

</div>

Thanks!

[ttam]

Bump! Can I get a little help?

[kyosuken]

pseudo class :hover only works with <a> (anchor) tags in IE7 Maybe ?

Nevermind, it's not that... you may be got this bug : http://murphy.cz/ie7-hover-ghosts-bug/

[Asharae]

Something I have noticed in chrome, stick a margin on the text on the drop down, because sometimes the bullet on rollover goes behind text and looks wrong.

Just my 2p :)